<template>
  <a-drawer
    width="800px"
    :visible="visible"
    :zIndex="style.zIndex"
    :body-style="{ padding: '10px' }"
    title="字段样式"
    @close="cancel"
  >
    <vxe-toolbar ref="styleToolbar">
      <template v-slot:buttons>
        <a-space>
          <a-button @click="yesNo" type="primary"> 是否 </a-button>
          <a-button @click="taskStatus" type="primary"> 流程任务状态 </a-button>
        </a-space>
      </template>
    </vxe-toolbar>
    <vxe-table row-key ref="styleTable" :data="styles" :height="height">
      <vxe-table-column title="新增" width="54px" align="center">
        <template #header>
          <a-button @click="add" size="small" type="primary">
            <a-icon type="plus" />
          </a-button>
        </template>
        <template v-slot="{ row }">
          <a-popconfirm
            title="确定删除配置?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="del(row)"
          >
            <a-button size="small" type="danger">
              <a-icon type="delete"></a-icon>
            </a-button>
          </a-popconfirm>
        </template>
      </vxe-table-column>

      <vxe-table-column title="值" width="130px">
        <template v-slot="{ row }">
          <a-input allow-clear placeholder="值" v-model="row.value" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="预设值颜色" width="120px">
        <template v-slot="{ row }">
          <a-select
            allow-clear
            placeholder="请选择预设值颜色"
            v-model="row.presets"
            style="width: 100%"
          >
            <a-select-option value="pink">pink</a-select-option>
            <a-select-option value="red">red</a-select-option>
            <a-select-option value="orange">orange</a-select-option>
            <a-select-option value="green">green</a-select-option>
            <a-select-option value="cyan">cyan</a-select-option>
            <a-select-option value="blue">blue</a-select-option>
            <a-select-option value="purple">purple</a-select-option>
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column title="自定义" width="80px" align="center">
        <template v-slot="{ row }">
          <colorPicker v-model="row.custom"></colorPicker>
        </template>
      </vxe-table-column>
      <vxe-table-column title="内容" width="150px">
        <template v-slot="{ row }">
          <a-input allow-clear placeholder="显示内容" v-model="row.content" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="预览" align="center" width="100px">
        <template v-slot="{ row }">
          <a-tag v-if="row.presets" :color="row.presets">{{
            row.content
          }}</a-tag>
          <a-tag v-else :color="row.custom">{{ row.content }}</a-tag>
        </template>
      </vxe-table-column>
    </vxe-table>

    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="ok" type="primary"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "list-style",
  data() {
    return {
      style: {
        zIndex: 1020,
      },
      height: window.innerHeight - 182,

      styles: [],
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    config: {
      type: Object,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    ok() {
      this.cancel();
      this.$emit("ok", this.styles);
    },

    /**
     * 新增
     */
    add() {
      this.styles.push({
        value: null,
        presets: undefined,
        custom: "#000",
        content: "测试内容",
      });
    },

    /**
     * 任务状态
     */
    taskStatus() {
      var styles = [
        { value: 0, presets: null, custom: "#3c9cff", content: "处理中" },
        { value: 2, presets: null, custom: "#f9ae3d", content: "终止" },
        { value: 4, presets: null, custom: "#909399", content: "暂停" },
        { value: 6, presets: null, custom: "#f56c6c", content: "即将到期" },
        { value: 8, presets: null, custom: "#f56c6c", content: "拒绝" },
        { value: 10, presets: null, custom: "#303133", content: "撤销" },
        { value: 12, presets: null, custom: "#606266", content: "删除" },
        { value: 14, presets: null, custom: "#909193", content: "退回重填" },
        { value: 16, presets: null, custom: "#c8c9cc", content: "取消" },
        { value: 100, presets: null, custom: "#5ac725", content: "完成" },
      ];
      this.styles = styles;
    },

    /**
     * 是否
     */
    yesNo() {
      var styles = [
        { value: 1, presets: "red", custom: null, content: "是" },
        { value: 0, presets: "green", custom: null, content: "否" },
      ];
      this.styles = styles;
    },

    /**
     * 删除
     */
    del(row) {
      let spIndex = -1;
      this.styles.forEach((item, index) => {
        if (item._X_ROW_KEY == row._X_ROW_KEY) {
          spIndex = index;
        }
      });
      if (spIndex != -1) {
        this.styles.splice(spIndex, 1);
      }
    },

    /**
     * 初始化
     */
    init() {
      this.styles = XEUtils.clone(this.config.style, true);
    },
  },
};
</script>

<style lang="less" scoped>
.drag-btn {
  cursor: move;
}
</style>
